<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./vue.js"></script>
    </head>
    <style>

    </style>
    <body>
        <div id="app">
            <cpn :number1="num1" :number2="num2" @numchange="numchange" @numchange2="numchange2"></cpn>
        </div>
    </body>
    <template id="cpnC">
        <div>
            <p>props:{{number1}}</p>
            <p>data:{{dnumber1}}</p>
            <!-- <input type="text" v-model="dnumber1"> -->
            <input type="text" :value="dnumber1" @input="numInput">
            <p>props:{{number2}}</p>
            <p>data:{{dnumber2}}</p>
            <!-- <input type="text" v-model="dnumber2"> -->
            <input type="text" :value="dnumber2" @input="numInput2">
        </div>
    </template>
    <script>
        let cpn = {
            template:"#cpnC",
            props: {
                // 展示数据 这种
                number1:{
                    type:Number
                },
                number2:{
                    type:Number
                }
            },
            // 如果要修改数据   需要放在data里面处理
            data () {
                return {
                    dnumber1:this.number1,
                    dnumber2:this.number2,
                }
            },
            methods: {
                numInput(event){
                    // 1.将input中的value赋值到dnumber1中
                    this.dnumber1 = parseInt(event.target.value);
                    //console.log(this.dnumber1);
                    // 2.为了让父组件可以修改值,发出一个事件
                    this.$emit("numchange", this.dnumber1);
                    // 3.同时修饰dnumber2的值
                    this.dnumber2 = this.dnumber1 * 100;
                    this.$emit("numchange2", this.dnumber2);
                },
                numInput2(event){
                    this.dnumber2 = event.target.value * 1;
                    this.$emit("numchange2", this.dnumber2);
                    this.dnumber1 = this.dnumber2 / 100;
                    this.$emit("numchange", this.dnumber1);
                }
            }
        }
        let app = new Vue({
            el:"#app",
            data:{
                num1:1,
                num2:0
            },
            components: {
                cpn
            },
            methods: {
                numchange(value){
                    // console.log(value);
                    this.num1 = value
                },
                numchange2(value){
                    // console.log(value);
                    this.num2 = value
                }
            }
        })
    </script>
</html> 